<template>
  <!-- 安全设置 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
    </h1>
    <div class="changepassword-wrapper-h5">
      <van-tabs v-model:active="active" @change="changeTabs">
        <van-tab :title="item.title" v-for="item in navs" :key="item.active"></van-tab>
      </van-tabs>
      <el-form v-if="active === 0" ref="loginFormRef" :model="loginForm" label-position="top" :rules="loginFormRules">
        <!-- 新密码 -->
        <el-form-item :label="t('userData.title10')" prop="newPassword">
          <el-input v-model="loginForm.newPassword" type="password" show-password :placeholder="t('login.psdRule')"/>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item :label="t('userData.title12')" prop="checkPassword">
          <el-input v-model="loginForm.checkPassword" type="password" show-password :placeholder="t('login.enterAgain')"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="header-mine-search__btns" @click="resetPassword">{{t('userData.saveBtn')}}</el-button>
        </el-form-item>
      </el-form>
      <el-form v-if="active === 1" ref="withdrawMoneyFormRef" :model="withdrawMoneyForm" label-position="top" :rules="withdrawMoneyFormRules">
        <!-- 新密码 -->
        <el-form-item :label="t('userData.title9')" prop="oldPassWord">
          <el-input v-model="withdrawMoneyForm.oldPassWord" type="password" show-password :placeholder="t('userData.rule8')"/>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item :label="t('userData.title10')" prop="newPassword">
          <el-input v-model="withdrawMoneyForm.newPassword" type="password" show-password :placeholder="t('login.psdRule')"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="header-mine-search__btns" @click="upWithdrawPassword">{{t('userData.saveBtn')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts" name="ChangePaswordH5">
import userinfoApi from '@/api/modules/userinfo';
import recordApi from '@/api/modules/record';
import userinfo from '@/store/userinfo';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();

const global:any = getCurrentInstance()?.appContext.config.globalProperties;

const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const data:any = reactive({
  form: {},
  navs: [
    {
      title: t('userData.loginPwd'),
      active: 'loginPassword',
    },
    {
      title: t('userData.pickPwd'),
      active: 'withdrawMoneyPassword',
    }

  ],
  active: 0,
  loginForm: {},
  loginFormRules: {
    oldPassWord: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { min: 8, max: 16, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
    ],
    newPassword: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { min: 8, max: 16, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
    ],
    checkPassword: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error(t('login.enterAgain')))
        } else if (value !== loginForm.value.newPassword) {
          callback(t('login.diffrencePsd'))
        } else {
          callback()
        }
      }, trigger: 'blur' },
    ],
  },
  loginFormRef: null,
  withdrawMoneyFormRef: null,
  withdrawMoneyForm: {},
  withdrawMoneyFormRules: {
    oldPassWord: [
      { required: true, message: t('userData.rule8'), trigger: 'blur' },
      { min: 8, max: 16, message: t('userData.rule8'), trigger: 'blur' },
    ],
    newPassword: [
      { required: true, message: t('login.psdRule'), trigger: 'blur' },
      { min: 8, max: 16, message: t('userData.rule8'), trigger: 'blur' },
    ],
  },
});

const {
  form,
  navs,
  active,
  loginForm,
  loginFormRef,
  withdrawMoneyFormRef,
  loginFormRules,
  withdrawMoneyForm,
  withdrawMoneyFormRules,
} = toRefs(data);


// 获取个人信息
const getUserPersonal = () => {
  recordApi.getUserPersonal({}).then((response:any)=>{
    if(response.code === 200){
      form.value = response.data || {};
    }
  })
}
getUserPersonal();

// tab改变
const changeTabs = () => {
  console.log(active.value)
}

// 重置密码
const resetPassword = () => {
  loginFormRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      userinfoApi.resetPassword({
        newPassword: loginForm.value.newPassword,
        type: 1,
        userName: piniaUserinfo.getUserinfo.user.userName,
      }).then((response:any)=>{
        if(response.code === 200){
          global.message(response.msg)
        }
      }).finally(()=>{
      });
    }
  });
}

// 取款密码
const upWithdrawPassword = () => {
  withdrawMoneyFormRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      userinfoApi.upWithdrawPassword({
        newPassword: withdrawMoneyForm.value.newPassword,
      }).then((response:any)=>{
        if(response.code === 200){
          global.message(response.msg);
        }
      }).finally(()=>{
      });
    }
  });
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.changepassword-wrapper-h5{
  margin: var(--rem-20);
}
</style>
